<template>
  <div class="mask">
    <div class="pop-echart">
      <div class="pop-echart-list">
        <div class="tit">监督检查统计分析</div>
        <div class="pop-echart-item" ref="peItem"></div>
        <div class="pop-echart-item" ref="peItem0"></div>
        <div class="close" @click="isClose()"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  components: {},
  mounted() {
    this.echartsInit();
    this.echartsInit2();
  },
  beforeDestroy() {},
  methods: {
    isClose() {
      this.$emit("isClose", false);
    },
    echartsInit() {
      this.$echarts.init(this.$refs.peItem).setOption({
        color: ["#F9DF86", "#317EFE", "#ED6BA3", "#FC9E44"],
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return `${params.data.name} : ${params.data.num} (${params.data.value}%)`;
          },
        },
        series: [
          {
            name: "监督检查统计分析",
            type: "pie",
            radius: [50, 100],
            center: ["50%", "50%"],
            roseType: "area",
            label: {
              color: "#fff",
            },
            data: [
              { num: 6, value: 25, name: "定期检查" },
              { num: 7, value: 29.17, name: "专项检查" },
              { num: 8, value: 33.33, name: "重点检查" },
              { num: 3, value: 12.5, name: "日常检查" },
            ],
          },
        ],
      });
    },
    echartsInit2() {
      this.$echarts.init(this.$refs.peItem0).setOption({
        color: ["#F9DF86", "#317EFE", "#ED6BA3", "#FC9E44"],
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return `${params.data.name} : ${params.data.num} (${params.data.value})%`;
          },
        },
        series: [
          {
            name: "监督检查统计分析",
            type: "pie",
            radius: [50, 100],
            center: ["50%", "50%"],
            roseType: "area",
            label: {
              color: "#fff",
            },
            data: [
              { num: 89, value: 43.63, name: "正常处理" },
              { num: 72, value: 35.29, name: "监督建议书" },
              { num: 38, value: 18.63, name: "整改通知书" },
              { num: 5, value: 2.45, name: "移送函" },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100%;
  position: relative;
  .pop-echart {
    width: 900px;
    height: 424px;
    background: url(../../assets/img/ng-bg-alter1.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .pop-echart-list {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 63px 35px 22px;
      display: flex;
      position: relative;
      .tit {
        position: absolute;
        top: 28px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        // font-family: Source Han Sans CN;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        color: #ffffff;
      }
      .pop-echart-item {
        flex: 1;
        height: 100%;
      }

      .close {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
}
</style>
